<template>
  <div>
    <div class="header">
        <div class="navs" >
            <div class="navItem" 
            v-for='(item,index) in list' 
            :key="index" 
            @click="toLink(item.router,index)"
            :class="{'active':currentIndex==index}"
            >
            {{item.name}}
            <div class=""> 

            </div>
            </div>
        </div>
        <div class="rightTime" >
            <span>
            {{year}}
            </span>
            <span>{{time}}</span>
            <span @click="getCenter">{{week}}</span>
            <span class="el-icon-switch-button" @click="loginOut"></span>
        </div>
        <div class="system-title-bar">
            <div class="system-title-wrapper clearfix">
                <div class="system-title-text">
                    自 然 灾 害 综 合 风 险 预 测 预 报 预 警 系 统
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {
  onMounted,
  ref,
  watch
} from 'vue'
import { useRouter,useRoute } from 'vue-router'

export default {
    setup(){
        let currentIndex = ref(-1);
        // 获取路由器实例
        const router = useRouter()
        // route是响应式对象,可监控器变化
        const route = useRoute();
        const list = [
            {name: '海南概况',router :'hngk'},
            // {name: '监测预警',router :'jcyj'},
            {name: '数据中心',router :'sjzx'},
            {name: '风险防控',router :'fxfk'},
            {name: '智慧救援',router :'zhjy'},
           
        ];
        function toLink(ly,index){
            router.push({name:ly})
            currentIndex.value = index
        }
        watch(() => route.name,(name) => {
                switch(name) {
                    //海南概况
                    case "hngk":
                        currentIndex.value = 0
                        break;
                    //数据中心
                    case "sjzx":
                        currentIndex.value = 1
                        break;
                    //风险防控
                    case "fxfk":
                        currentIndex.value = 2
                        break;
                    //智慧救援
                    // case "zhjy":
                    //     currentIndex.value = 3
                    //     break;
                    //智慧救援
                    case "zhjy":
                        currentIndex.value = 3
                        break;
                } 
            },{
                immediate:true
            }
        );
        function getCenter(){
            console.log(layerManager.getCenter())
        }
        function timeToString(nowTime) {
            if (nowTime < 10) {
            return '0' + nowTime
            } else {
            return '' + nowTime
            }
        }
        let time = ref(null);
        let year = ref(null);
        let week = ref(null);
        function getTime(){
            setInterval(() => {
            const date = new Date()
            const hour = date.getHours()
            const minute = date.getMinutes()
            const second = date.getSeconds()
            const month = date.getMonth() + 1
            const today = date.getDate()
            time.value = timeToString(hour) + ':' + timeToString(minute) + ':' + timeToString(second)
            year.value = date.getFullYear() + '年' + timeToString(month) + '月' + timeToString(today) + "日"
            //const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
            const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            week.value = weekday[date.getDay()]
            }, 1000)
        }
        const loginOut = ()=>{
            localStorage.removeItem('VisAuth')
            console.log("等处")
            router.push({name:'login'})
        }
        onMounted(()=>{
            getTime()
        })
        return {
            list,
            toLink,
            time,
            year,
            week,
            getTime,
            getCenter,
            currentIndex,
            loginOut
        }
    }
}
</script>
<style lang="stylus" scoped>

@media (max-width: 2880px)  
  .bgColor
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    display:flex
    div:nth-child(1)
      flex:1
      //background:linear-gradient(to bottom right, rgba(0,0,0,.7) 10%, rgba(0,0,0,0))
      //background:#000
    div:nth-child(2)
      flex:1
      //background:linear-gradient(to bottom left, rgba(0,0,0,.7) 10%, rgba(0,0,0,0))
      //background:#000
      
  .header
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    color:#fff
    cursor: pointer
    display: flex
    justify-content :space-between
    //background:url('/data/images/header/top.png') right top no-repeat, linear-gradient(to bottom right, rgba(0,0,0,.7) 60%, rgba(0,0,0,0));
    // background:url('/data/images/header/top1.png') right top no-repeat
    // background-size: 100%
    .navs
      display:flex
      margin-left:vw(24)
      margin-top:vh(57)
      font-size:vw(15)
      .navItem
        margin-right:vw(15)
        width: vw(89)
        height: vh(37)
        line-height: vh(37)
        letter-spacing : vw(2)
        text-align: center
        background:url("/data/images/header/active.png")  no-repeat
        background-size :100% 100%
      .active
        background:url("/data/images/header/bg.png")  no-repeat
        background-size :100% 100%
    .rightTime
      margin-top:vh(13)
      margin-right: vw(36)
      font-size:vw(20)
      z-index:30
      span 
        color: #00E5FD
        margin-left:vw(15)
    .system-title-bar
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 10;
        background-color: #000103;
        background-repeat: no-repeat;
        background-size: 80% 50px;
        background-position: 51%;
        height: 50px;
        .system-title-wrapper
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            position: absolute;
            height: 100%;
            line-height: 50px;
            margin-right: -50%;
            .system-title-text
                font-size: 25px;
                font-weight: 650;
                color: #28bae3;
                text-align: center;
                background-image: -webkit-linear-gradient(bottom,#66f2f9,#33cbfb);
                background-clip: text;
                text-fill-color: transparent;
                font-style: inherit;
                font-family: Microsoft Yahei;
                vertical-align: baseline;

</style>
<style lang="stylus" scoped>
@media (min-width: 3000px)    
  .bgColor
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    display:flex
    div:nth-child(1)
      flex:1
    div:nth-child(2)
      flex:1
  .header
    width:100%
    height:vh(85)
    position:absolute
    z-index:3
    top:0
    left:0
    color:#fff
    cursor: pointer
    display: flex
    justify-content :space-between
    background:url('/data/images/header/top.png') right top no-repeat
    background-size: 100%
    .navs
      display:flex
      margin-left:vw1(41)
      margin-top:vh(48)
      font-size:vw1(15)
      .navItem
        margin-right:vw1(15)
        width: vw1(89)
        height: vh(37)
        line-height: vh(37)
        letter-spacing : vw1(2)
        text-align: center
        background:url("/data/images/header/active.png")  no-repeat
        background-size :100% 100%
      .active
        background:url("/data/images/header/bg.png")  no-repeat
        background-size :100% 100%
    .rightTime
      margin-top:vh(36)
      margin-right: vw1(41)
      font-size:vw1(20)
      span 
        color: #00E5FD
        margin-left:vw1(15)
</style>